<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>3-用jQuery Mobile 写表单</title>

    <!-- <link href="jquery.mobile-1.2.0.css" rel="stylesheet" />
    <script src="jquery-1.7.1.min.js"></script>
    <script src="jquery.mobile-1.2.0.js"></script> -->
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    

    <style type="text/css">
        .label1_stytle {
            font-weight: bold;
            display: inline-block;
            width: 100px;
            margin-bottom: 15px;
            margin-left: 15px;
            margin-right:50px;
        }

        .p_background {
            background: #a6a2a2;
            font-weight: bold;
            margin-left: 15px;
            margin-right: 15px;
        }

        .label2_sytle {
            font-weight: bold;
            display: inline-block;
            margin-bottom: 15px;
            margin-left: 15px;
        }

        .input1_stytle {
            background: #c7f3e7;
            margin-bottom: 15px;
            margin-left: 15px;
            margin-right: 15px;
        }


        .div1_content {
            border: solid #000000; /*设置边框样式跟颜色*/
            border-width: 1px; /*设置边框宽度*/
            width: 630px; /*设置div宽度*/
            height: 350px; /*设置div高度*/
            margin: 0 auto; /*设置div居中*/
        }

        .div2_content {
            border: solid #000000; /*设置边框样式跟颜色*/
            border-width: 1px; /*设置边框宽度*/
            width: 630px; /*设置div宽度*/
            margin-bottom: 15px;
            height: 350px; /*设置div高度*/
            margin: 0 auto; /*设置div居中*/
        }

        .p_stytle {
            width: 630px; /*设置div宽度*/
            margin: 0 auto; /*设置div居中*/
            margin-bottom: 15px;
            margin-top: 15px;
        }

        .div3_content {
            border: solid #000000; /*设置边框样式跟颜色*/
            border-width: 1px; /*设置边框宽度*/
            width: 630px; /*设置div宽度*/
            margin-bottom: 15px;
            height: 200px; /*设置div高度*/
            margin: 0 auto; /*设置div居中*/
        }
        .div4_content {
            border: 0; /*设置边框样式跟颜色*/
            border-width: 1px; /*设置边框宽度*/
            width: 630px; /*设置div宽度*/
            margin-bottom: 15px;
            height: 50px; /*设置div高度*/
            margin: 0 auto; /*设置div居中*/
        }

        

    </style>
</head>

<body>
    <p class="p_stytle">
        We sincerely appreciate your feedback and we will use it to make future training
        as effective and useful as possible.Thank you.
    </p>

    <div class="div1_content">
        <p class="p_background">
            Please enter the following informations:
        </p>

        <div data-role="fieldcontain">
            <label class="label1_stytle">First Name:</label>
            <input type="text" style="width:200px;" /><br />
        </div>

        <div data-role="fieldcontain">
            <label class="label1_stytle">Last Name:</label>
            <input type="text" style="width:200px;" /><br />
        </div>

        <div data-role="fieldcontain">
            <label class="label1_stytle">Title:</label>
            <input type="text" style="width:200px;" /><br />
        </div>

        <div data-role="fieldcontain">
            <label class="label1_stytle">Email:</label>
            <input type="email" style="width:200px;" /><br />
        </div>

        <div data-role="fieldcontain">
            <label class="label1_stytle">Company:</label>
            <input type="text" style="width:200px;" /><br />
        </div>

    </div>


    <div class="div2_content">
        <p class="p_background">
            Please tell us about your previous experience with the Eloqua system
            prior to this training:
        </p>

        <div data-role="fieldcontain">
            <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">

                <label class="label2_sytle">
                    How much of the Eloqua online training did you complete?
                </label><br />

                <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
                <label for="radio-choice-1" style="margin-left:15px; ">0%</label>

                <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
                <label for="radio-choice-2"> 25%</label>

                <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" />
                <label for="radio-choice-3">75%</label>

                <input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" />
                <label for="radio-choice-4">100%</label>
            </fieldset>


        </div>

        <div data-role="fieldcontain">
            <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">

                <label class="label2_sytle">
                    The online training was good preequisite for the in-class training?
                </label><br />

                <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
                <label for="radio-choice-1" style="margin-left:15px;"> Disagree</label>

                <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
                <label for="radio-choice-2">  Partally Agree</label>

                <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" />
                <label for="radio-choice-3"> Agree</label>

                <input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" />
                <label for="radio-choice-4">Strongly Agree</label>
            </fieldset>
        </div>

        <div data-role="fieldcontain">
            <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">

                <label class="label2_sytle">
                    What was your hands-on experience using the Eloqua system?
                </label><br />

                <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
                <label for="radio-choice-1" style="margin-left:15px;">No Experience</label>

                <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
                <label for="radio-choice-2"> Basic</label>

                <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" />
                <label for="radio-choice-3">  Intermediate</label>

                <input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" />
                <label for="radio-choice-4">Advanced</label>
            </fieldset>
        </div>


    </div>

    <div class="div3_content">
        <p class="p_background">
            Additional Comments:
        </p>
        <div data-role="fieldcontain">
            <textarea rows="10" style="width:580px; height:100px;margin:15px;overflow-y: scroll;"></textarea>
        </div>
    </div>

    <div class="div4_content">
        <div class="ui-block-a"><button style="margin-left:15px; " type="submit" data-theme="d">submit</button> </div>
    </div>

    <p class="p_stytle">
        Thank you for your feedback.Your input will be help us ensure that future
        training sessions are effective and useful.
    </p>


</body>
</html>

